<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 子孙后代选择器 选择某个关系下的子元素以及后代元素 */
      body p {
        color: brown;
      }

      body div p {
        color: violet;
      }

      body div div p {
        color: aqua;
      }

      body div div div p {
        color: blue;
      }

      /* 子元素选择器 选择某个关系下的子元素不含后代元素 */
      body > div > div > p {
        color: red;
      }

      /* 伪类选择器 匹配元素的状态 */
      /* 未访问状态 */
      a:link {
        color: red;
      }

      /* 访问过状态 */
      a:visited {
        color: green;
      }

      /* 悬停状态 */
      a:hover {
        color: violet;
      }

      /* 点击状态 */
      a:active {
        color: blue;
      }
    </style>
  </head>

  <body>
    <a href="http://www.bing.com">超链接1</a>
    <a href="http://www.qq.com">超链接2</a>
    <p>p1</p>
    <div>
      <p>p2</p>
    </div>
    <div>
      <div>
        <p>p3</p>
      </div>
      <div>
        <div>
          <p>p4</p>
        </div>
      </div>
    </div>
  </body>
</html>
